<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="../css/normalize.css" rel="stylesheet" />
    <link href="../css/global.css" rel="stylesheet" />
    <link href="../css/base.css" rel="stylesheet" />
    <title>Document</title>

    <style type="text/css">
        .clearfix{clear: both;}
.wrap{display: flex;}
.fixed{background-color: #FF6B4B;}
.middle{flex: 1;background-color: #9ECAF0;}
#left, #right{float: left;width: 220px;height: 200px;background: blue;}
#right{float: right;}
#main{margin: 0 230px;background: red;height: 200px;}

.left{width: 200px;float: left;background-color: #ccc;}
.mid{background-color: #eee;}
.right{width: 200px;float: right;background-color: #ccc;}

 
/*推荐课程列表*/
.course-list{background-color:#fff}
.course-list ul li{margin-top:10px;padding:5px;padding-right:15px;padding-left:15px;border-bottom:1px solid #d5d5d5;color:#000;line-height:150%}
.course-list ul li:focus{background-color:#999}
.course-list ul li a{display:-webkit-box;display:-ms-flexbox;display:flex;color:#333;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.course-list ul li a:visited{display:block;height:100%;color:#333}
.course-list .cover{margin-right:.5em}
.course-list .cover,.course-list .cover img{width:6pc;height:4pc}
.course-list .intro{min-width:0;-webkit-box-flex:1;-ms-flex:1;flex:1}
.course-list .tit{overflow:hidden;margin-top:10px;width:auto;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;word-wrap:break-word;font-weight:400;font-size:18px;line-height:180%;word-break:break-all}
.course-list .desc{display:block;color:#777;vertical-align:bottom;font-size:14px}
.course-list .money{color:#ff6545;font-size:1pc}
.course-list .arrow_r{position:absolute;right:10px;display:block;margin-top:-40px;width:14px;height:1pc;background-image:url(../images/icon.png);background-position:-419px 0;background-size:450px auto;background-repeat:no-repeat;content:'';-webkit-transition:.25s;transition:.25s;-webkit-background-size:450px auto}
.autocut{overflow:hidden;margin-top:10px;width:auto;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;word-wrap:break-word;word-break:break-all}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="fixed">固定宽度</div>
        <div class="middle autocut">自适自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应应</div>
        <div class="fixed">固定宽度</div>
    </div>
    <br>
    <br>
    <div>
        方法二：采用的是浮动布局.br这种方法我利用的就是浮动原理，左右定宽度分别进行左浮动和右浮动，此时主内容列（中间列没有定度）主会自动插入到左右两列的中间，最要注意的一点是，中间列一定要放在左右两列的后面
    </div>
    <div>
        <div id="left">1</div>
        <div id="right">2</div>
        <div id="main">margin: 0 230px;有左右间隔</div>
    </div>

    <br>
    <br>

    <div>方法三：个人感觉最简单方法,与二一样，</div> 
    <div>
        <div class="left">1</div>
        <div class="right">3</div>
        <div class="mid">width:auto;</div>
    </div>

    <div class="course-list">
        <ul id="content">
                <li>
                    <a href="/Course/detail?id=26" class="clearfix">
                        <div class="cover"><img src="/upload/image/201607/2016071213022137774.png"></div>
                        <div class="intro">
                            <div class="tit">互联网与金融创互联网与金融创新研修班互联网与金融创新研修班互联网与金融创新研修班互联网与金融创新研修班互联网与金融创互联网与金融创新研修班互联网与金融创新研修班互联网与金融创新研修班互联网与金融创新研修班新研修班新研修班</div>
                            <div class="desc">推荐奖励：<span class="money">5000</span>积分/人</div>
                            <span class="arrow_r"></span>
                        </div>
                    </a>
                </li>
        </ul>
        <div id="loadmore" class="loadmore"><a id="nextpage">更多推荐项目...</a></div>
        <div id="loading"><div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div></div>
    </div>


    <div class="autocut">互联网与金融创互联网与金融创新研修班互联网与金融创新研修班互联网与金融创新研修班互联网与金融创新研修班新研修班互联网与金融创互联网与金融创新研修班互联网与金融创新研修班互联网与金融创新研修班互联网与金融创新研修班新研修班</div>
</body>
</html>
